<script setup>
import { ref, watch, computed } from 'vue'
import { useDeleteTaskService } from '@/api/task'

// 控制任务展开/收起，默认展开
const finishedTasks_isShow = ref(true)

// 接收父组件传递的已完成任务列表
const props = defineProps({
  taskList: Array
})
// 已完成任务列表
const finishedTaskList = ref(props.taskList)
console.log('已完成任务列表:' + JSON.stringify(finishedTaskList.value))
// 已完成任务数量
const finishedCount = computed(() => finishedTaskList.value.length)
// 删除已完成任务事件
const deleteTask = async (id) => {
  const res = await useDeleteTaskService({ id })
  if(res.data.status === 0) {
    ElMessage.success('任务删除成功！')
  } else {
    ElMessage.error('任务删除失败！')
  }
  // 前端立即更新任务列表，防止后端响应时间长
  finishedTaskList.value = finishedTaskList.value.filter(item => item.id !== id)
}
// 拖动开始
const dragstart = (index, event) => {
  event.dataTransfer.setData("text", index)
  console.log("您已成功拖动元素" + index)    
}
// 进行放置
const drop = (targetIndex, list, event) => {
  const draggedIndex = parseInt(event.dataTransfer.getData("text"), 10); // 转换为整数
  const draggedTask = list[draggedIndex]; // 获取拖拽的任务
  list.splice(draggedIndex, 1); // 先移除原位置的元素
  list.splice(targetIndex, 0, draggedTask); // 在新位置插入
  console.log("drop", event)
  console.log('targetIndex:' + targetIndex + '.')
  console.log('draggedIndex:' + draggedIndex + '.')
  console.log(list)
}
// 放置位置 - 阻止默认事件,即允许放置
const dragover = (event) => {
  event.preventDefault()
}
// 监听父组件传来的已完成任务列表变化，实时修改数量
watch(
  () => props.taskList,
  (newTaskList) => {
    if (newTaskList && newTaskList.length > 0) {
      console.log('FinishedTasksContent: 接收到新的任务列表',props.taskList)
      finishedTaskList.value = [...newTaskList] // 使用展开运算符创建新数组
    }
  },
  {
    deep: true
  }
)
</script>

<template>
  <div class="list">
    <!-- 顶部 -->
    <div class="list-header">
      <div class="left">
        <div class="iconfont">&#xe790;</div>
        <div class="header-title">已完成</div>
      </div>
      <div class="right">
        <div class="iconfont">&#xe60c;</div>
      </div>
    </div>
    <!-- 任务部分 -->
    <div class="tasks">
      <div class="finished">
        <div class="section-header" :class="{'collapsed': !finishedTasks_isShow}">
          <!-- 展开任务箭头 -->
          <span class="iconfont" 
          v-if="finishedTasks_isShow"
          @click="finishedTasks_isShow = false"
          >
            &#xe649;
          </span>
          <!-- 任务收起箭头 -->
          <span class="iconfont" 
          v-else
          @click="finishedTasks_isShow = true"
          >
            &#xe62b;
          </span>
          <div class="title">任务数量</div>
          <!-- 任务数量 -->
          <span class="count">{{ finishedCount }}</span>
        </div>
        <!-- 任务列表 -->
        <div class="tasksList" v-if="finishedTasks_isShow">
          <ul>
            <li draggable="true" 
            @dragstart="dragstart(index, $event)" 
            @drop.prevent="drop(index, finishedTaskList, $event)" 
            @dragover.prevent="dragover"  
            v-for="(item, index) in finishedTaskList" 
            :key="item.id"
            >
              <div class="task">
                <SortBtn></SortBtn>
                <div class="iconfont">&#xe79e;</div>
                <div class="text">{{ item.title }}</div>
              </div>
              <div class="icon">
                <div class="classify">{{ item.classify_name }}</div>
                <div class="date">{{ item.finish_date }}</div>
                <!-- 父传子传给子组件来删除任务 -->
                <DeleteTaskBtn @delete-click="deleteTask(item.id)" />
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>
.list {
  height: 100vh;
  display: flex;
  padding-bottom: 30px;
  flex-direction: column;
  border-right: 1px solid #ccc;
  overflow: auto;

  .list-header {
    margin: 20px;
    height: 40px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;

    .left,
    .right {
      display: flex;
      align-items: center;

      .iconfont {
        margin-right: 10px;
        font-size: 23px;
        color: #a3a3a3;
        cursor: pointer;
      }

      .header-title {
        font-size: 22px;
        font-weight: 700;
      }
    }
  }

  .finished {
    margin: 0 20px;
    overflow: auto;

    .section-header {
      height: 2.5rem;
      display: flex;
      align-items: center;
      border-radius: 0.4rem;
      font-size: 0.95rem;
      color: #a3a3a3;
      font-size: 13px;

      // 任务收起时的样式
      &.collapsed {
        background-color: #f1f1f1;
      }

      .title {
        margin: 0 5px;
        color: #000;
        font-weight: 700;
      }
    }
    
    .tasksList {
      ul li {
        height: 40px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin: 10px 0;
        padding: 0 15px 0 0;

        .task {
          display: flex;
          align-items: center;

          .iconfont {
            margin: 0 8px;
            color: #466ff5;
            font-size: 20px;
          }

          .text {
            font-size: 14px;
          }
        }

        .icon {
          display: flex;
          align-items: center;

          .date {
            margin-right: 5px;
            font-size: 12px;
            color: #466ff5;
          }

          // 使用scoped时，无法修改子组件的样式，使用::v-deep则可以1修改子组件样式
          ::v-deep(.iconfont) {
            color: #a3a3a3;
            font-size: 14px;
          }
        }
      }

      ul li:hover {
        border-radius: 5px;
        background-color: #f1f1f1;
      }
    }

    .iconfont,
    .text,
    .date {
      color: #a3a3a3 !important;
    }

    .classify {
      margin-right: 5px;
      color: #a3a3a3 !important;
      font-size: 13px;
    }
  }
}

// 超小屏幕下
@media screen and (max-width: 575px) {
  .list {
    width: 100%;
  }

  .content {
    display: none;
  }
}

// 小屏幕下
@media screen and (min-width: 576px) {
  .list {
    width: 81%;
  }

  .content {
    display: none;
  }
}

// 中等、大、超大屏幕下
@media screen and (min-width: 768px) {
  .list {
    width: 40%;
  }

  .content {
    width: 41%;
    display: block;
  }
}

</style>
